<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team JAYZ Snake And Ladders</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #eaeaea;
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        #container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            margin: 20px;
        }
        #board {
            display: grid;
            grid-template-columns: repeat(6, 60px);
            grid-template-rows: repeat(5, 60px);
            gap: 1px;
            margin: 20px;
            width: 370px;
            height: 310px;
            background-color: #fff;
            border: 2px solid #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .square {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #333;
            background-color: #f0f0f0;
            position: relative;
            font-weight: bold;
            font-size: 18px;
            transition: background-color 0.3s;
        }
        .square:hover {
            background-color: #d1d1d1;
        }
        .snake { background-color: rgba(255, 0, 0, 0.5); }
        .ladder { background-color: rgba(0, 255, 0, 0.5); }
        .player {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            color: white;
            position: absolute;
            top: 15%;
            left: 15%;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .p1 { background-color: red; }
        .p2 { background-color: blue; }
        .p3 { background-color: green; }
        .p4 { background-color: orange; }
        .p5 { background-color: violet; }
        .p6 { background-color: pink; }
        #details, #questionBox {
            margin-left: 20px;
            text-align: left;
            background-color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        #questionBox {
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        #questionText {
            font-weight: bold;
            margin-bottom: 10px;
        }
        #choices div {
            margin: 5px 0;
        }
        #rollButton {
            margin: 20px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #rollButton:hover {
            background-color: #0056b3;
        }
        #buttonContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        #message {
            margin-top: 10px;
            font-weight: bold;
        }
        #timer {
            font-size: 20px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <h1>Team JAYZ Snake And Ladders</h1>
    <div id="container">
        <div id="board"></div>
        <div id="details">
            <h2>Game Details</h2>
            <div><strong>Snakes:</strong></div>
            <ul id="snakeList"></ul>
            <div><strong>Ladders:</strong></div>
            <ul id="ladderList"></ul>
            <div><strong>Player Positions:</strong></div>
            <ul id="playerPositionsList"></ul>
        </div>
    </div>
    <div id="buttonContainer">
        <button id="rollButton">Roll Dice</button>
    </div>
    <div id="message"></div>
    <div id="questionBox">
        <h3 id="questionText"></h3>
        <div id="choices"></div>
        <div id="timer">20</div>
        <button id="submitAnswer">Submit Answer</button>
    </div>
    <script>
        const board = document.getElementById('board');
        const rollButton = document.getElementById('rollButton');
        const message = document.getElementById('message');
        const snakeList = document.getElementById('snakeList');
        const ladderList = document.getElementById('ladderList');
        const playerPositionsList = document.getElementById('playerPositionsList');
        const questionBox = document.getElementById('questionBox');
        const questionText = document.getElementById('questionText');
        const choices = document.getElementById('choices');
        const submitAnswer = document.getElementById('submitAnswer');
        const timerDisplay = document.getElementById('timer');

        const playerNames = ["Alice", "Bob", "Charlie", "Diana","von","cassy"]; 
        const playerPositions = Array(playerNames.length).fill(0); // Initialize positions for 4 players
        let currentPlayer = 0; // Start with the first player

        let diceRoll;
        let timer;
        let currentQuestionIndex = 0; // Track which question is being asked

        const snakes = { 16: 6, 22: 10 }; // Snakes details
        const ladders = { 2: 15, 7: 20 }; // Ladders details

        const questions = [
           
            {
                question: "EASY ROUND:sa 90s TV NoonTime Show na Eat Bulaga Sino sino Ang tatlong Lead TV host?",
                options: ["Tito Vic and Joey", "Vice Jhong and Vhong", "Lebron wade and Bosh"],
                answer: "Tito Vic and Joey"
            },
            {
                question: "E:sa 90s Hiphop, sino ang kumanta ng Awiting Mga Kababayan?",
                options: ["Francis M", "Andrew E", "Flow G"],
                answer: "Francis M"
            },
              {
                question: "E:sa 90s tv drama, ano ang title ng series na may Nawalang Diary?",
                options: ["Mula sa Puso","Mara Clara", "Ang Probinsyano"],
                answer: "Mara Clara"
            },
            {
                question: "E:sa 90s Anime Sino ang bida sa tv series na Ghost Figther",
                options: ["Goku", "Lupin III", "Eugene"],
                answer: "Eugene"
            },
              {
                question: "E: sa 90s Music  sino ang Lead Vocalist ng bandang Eraser Heads?",
                options: ["Rico Blanco", "Renz Verano", "Ely Buendia"],
                answer: "Ely Buendia"
            },
             {
                question: "E:sa 90s Baskeball sino ang tinatawag na the Living Legend?",
                options: ["Robert Joworski", "Allan Caidic", "Jun Mar Fajardo"],
                answer: "Robert Joworski"
            },
             {
                question: "E:sa 90s Movie kumpletuhin ang linya ni Rosana Roces sa kanyang pelikula:________ Ang itawag mo Saken",
                options: ["Master", "Forever", "Ligaya"],
                answer: "Ligaya"
            },
           
              {
                question: "E:sa 90s cartoons anong hayup si Scooby Doo?",
                options: ["Aso", "Pusa", "Kambing"],
                answer: "Aso"
            },
 {
                question: "E:sa 90s kid tv Show na Batibot ano ang pangalan ng Batang Pagong?",
                options: ["Sitsiritsit", "Pong Pagong", "Bong Pagong"],
                answer: "Pong Pagong"
            },

{
                question: "E:sa 90s Tv news magazine, ano ang title ng show na sumikat dahil sa mga Halloween horror stories, Hosted by Noli DeCastro ",
                options: ["Magandang tanghali bayan", "Magandang gabi bayan", "Magandang hapon bayan"],
                answer: "Magandang gabi bayan"
            },

             {
                question: "E:sa 90s sitcom na OK ka Fairy ko ano ang pangalan ng Bidang ginagapanan ni Vic Sotto?",
                options: ["Enteng Sayote", "Enteng Kabisote", "Pipoy"],
                answer: "Enteng Kabisote"
            },
{
                question: "E:sa 90s Dance craze Sinong Dance group ang nagpauso ng sayaw na my Awiting Always?",
                options: ["Universal Motion Dancers", "BINI", "SB19"],
                answer: "Universal Motion Dancers"
            },
            {
                question: "E:sa 90s larong kalyeng luksong tinik ano ang pinagsasama ng  magkaparehang taya na tatalunan ng kalabang kalaro?",
                options: ["Damit at sapatos", "Pencil at papel", "Kamay at Paa"],
                answer: "Kamay at Paa"
            },
            {
                question: "E:sa 90s Kids toy, Ano ang pangalan ng brand na naghahandle ng isang  digital pet na mula sa japan ?",
                options: ["Digimon", "Tamagotchi", "Pacman"],
                answer: "Tamagotchi"
            },
 {
                question: "E:sa 90s Movie na Bata Bata paano ka ginawa Kupletuhin ang linya:Akala mo lang Wala pero _____ _____ _____",
                options: ["oo! oo! oo!", "ako! ikaw! siya!", "meron! meron! meron!"],
                answer: "meron! meron! meron!"
            },
{
                question: "E:sa 90s Kid snaks, ano ang tawag sa sikat na powdered candy na pwedeng gamitan ng maliit na straw? ",
                options: ["yik yik", "bik bik", "mik mik"],
                answer: "mik mik"
            },
{
                question: "E:sa 90s TV drama na Marimar, Ano ang pangalan ng Aso ni Marimar ?",
                options: ["Bingo", "Doggy", "Fulgoso"],
                answer: "Fulgoso"
            },

 {
                question: "E:sa 90s Dance group na Street boys, Ano ang pangalan ng isa nilang meyembro na sikat na TV host na ngayon?",
                options: ["Vhong Navarro", "Ding Dong Dantes", "Wowie De Guzman"],
                answer: "Vhong Navarro"
            },
             {
                question: "E:sa 90s Music anong banda ang nagpasikat sa kantang Harana?",
                options: ["Parokya ni Edgar", "SugarFree", "Slapshock"],
                answer: "Parokya ni Edgar"
            },
              {
                question: "E:sa 90s Kid snaks|Candy Anong bubblegum ang may free comic strip?",
                options: ["Pintura", "Bazooka", "Judge"],
                answer: "Bazooka"
            },


{
                question: "E:sa 90s Sports, ano ang iba pang tawag kay Billiard legend na si Efren bata Reyes?",
                options: ["The Magician", "The Electrician", "The Miracle"],
                answer: "The Magician"
            },

            {
                question: "E:sa 90s Kid tv show the Bananas in Pajamas, ano ang pangalan ng kaibigan nilang daga?",
                options: ["Bonjing", "Doding", "mickey"],
                answer: "Doding"
            },
           {
                question: "E:Anong title ng 90s Gag show na nag pauso ng phrase na Chicken?",
                options: ["Bubble Gang", "Trupang Trumpo", "Wow Mali"],
                answer: "Trupang Trumpo"
            },

 {
                question: "E:Noong 1998 anong mobile phone ang sumikat na inintroduce ng company na Nokia?",
                options: ["Nokia5110", "Nokia3310", "NokiaN70"],
                answer: "Nokia5110"
            },

{
                question: "E:anong 90s toys ang sinasabing pag binasa at tinago sa matchbox ay manganganak ito?",
                options: ["Kisses", "gagamba", "posporo"],
                answer: "Kisses"
            },

{
                question: "E:sa 90s sports sino ang boksingero pinoy ang kaunaunahang nanalo ng silver sa summer olympics 1996?",
                options: ["Manny Pacquiao", "Onyok Velasco", "Pacho Villa"],
                answer: "Onyok Velasco"
            },





            {
                question: "HARD ROUND:sa 90s politics, Sino ang Presidente noong 1992?",
                options: ["Joseph Estrada", "Fidel Ramos", "Cory Aquino"],
                answer: "Fidel Ramos"
            },
           
             {
                question: "H:sa 90s sitcom na OKIDOKIDOK sino ang artistang gumanap bilang Mang Berto?",
                options: ["Dolphy", "Redford white", "Babalu"],
                answer: "Babalu"
            },
             {
                question: "H:sa 90s Anime na Sarah ang munting Prinsesa ano ang pangalan ng kayang Manika?",
                options: ["Amelia", "Emily", "Haidee"],
                answer: "Emily"
            },
             {
                question: "H:Kumpletuhin ang linyang ito na sumikat noong 90s, Fourthrity na! _____ _____ na!",
                options: ["Ang Baho", "Hoy Gising", "Ang TV"],
                answer: "Ang TV"
            },

             {
                question: "H:sa 90s Music anong pangalan ng  Banda na may mga hit songs na: If life is to short, Ill be there at Crazy",
                options: ["The Moffats", "Backstreet boys", "Hansons"],
                answer: "The Moffats"
            },
            {
                question: "H:sa 90s cartoons na Dexters labratory, sino ang enemy or rival ni Dexter?",
                options: ["Mandark", "Steve", "Darkvader"],
                answer: "Mandark"
            },
           
            {
                question: "H:sa 90s Anime  sino ang Crush ni Hanamichi Sakuragi sa series na Slam Dunk?",
                options: ["Sakura", "Haruko", "Kagome"],
                answer: "Haruko"
            },

            {
                question: "H:sa 90s Music  Anong taon nag concert si Michael Jaskson sa pilipinas?",
                options: ["1993", "1995", "1996"],
                answer: "1996"
            },

            {
                question: "H:Anong channel noong 90s ipanapalabs ang Game show na Kwarta or Kahon",
                options: ["IBC13", "ABC5", "RPN9"],
                answer: "RPN9"
            },
             {
                question: "H:sa 90s Music  sino ang kumanta ng hit song na Chuva cho cho?",
                options: ["Julina Magdangal", "Ogie Alcacid", "Bayani Agbayani"],
                answer: "Julina Magdangal"
            },
              {
                question: "H:sa 90s Teen tv show na TGIS  ano ang pangalan ng ginagampanan na Character ni Bobby Andrews?",
                options: ["Joaquin Wacks Torres III", "Miguel Mickey Ledesma", " Iñaki Torres"],
                answer: "Joaquin Wacks Torres III"
            }, 
               
            {
                question: "H:sa 90s Sports sa anong Sports nakilala ang 6 time world champion na si Paeng Nepomuceno?",
                options: ["Golf", "Bowling", "Boxing"],
                answer: "Bowling"
            },
            {
                question: "H:sa 90s Anime Ano ang pangalan ng kapatid ni Vincent sa Ghost Fighter?",
                options: ["Mikaela", "Sunshine", "Ruth"],
                answer: "Mikaela"
            },

               {
                question: "H:sa 90s larong kalye ano ang ginagamit na pamato sa larong tumbang preso?",
                options: ["Lata", "Pustiso", "Tsenelas"],
                answer: "Tsenelas"
            },
               {
                question: "H:Ano ang pangalan ng Bulkan na Tinaguriang isa sa pinakamalaking World Volcanic Eruption na nangyari noong 1991 ?",
                options: ["Mount Mayon", "Mount Pinatubo", "Mount Taal"],
                answer: "Mount Pinatubo"
            },
              {
                question: "H:Sino ang nag represent sa ating bansa noong Miss Universe 1994 na ginanap sa Maynila",
                options: ["Charlene Gozales", "Gloria Diaz", "Ruffa Gutierrez"],
                answer: "Charlene Gozales"
            },
               
               
                 {
                question: "H:Anong title ng kids tv show na nagbibigay ng values at edukasyon para sa mga bata sa pamamagitan ng adaptasyon ng mga kuwento at alamat ng Filipino ",
                options: ["Hiraya Manawari", "Sineskwela", "Wansapanataym"],
                answer: "Hiraya Manawari"
            },
 {
                question: "H:sa 90s Tv teen series na tabing ilog ano ang pangalan ng ginagampanan ni John loyd cruz?",
                options: ["Badong", "Rovic", "James"],
                answer: "Rovic"
            },
{
                question: "H:sa 90s Music ano ang pangalan ng isang member ng Spice Girls na tinatawag din Baby Spice?",
                options: ["Victoria Beckham ", "Emma Bunton", "Mel B "],
                answer: "Emma Bunton"
            },

            {
                question: "H:sa 90s Movie ni FPJ na dito sa Pitong Gatang Saang barangay Chairman si Berting Cayabyab?",
                options: ["Quiapo", "Tondo", "Sampaloc"],
                answer: "Tondo"
            },












        ];

        function createBoard() {
            for (let i = 30; i >= 1; i--) {
                const square = document.createElement('div');
                square.classList.add('square');
                square.textContent = i;

                // Add snakes
                if (snakes[i]) {
                    square.classList.add('snake');
                }

                // Add ladders
                if (ladders[i]) {
                    square.classList.add('ladder');
                }

                board.appendChild(square);
            }
            // Display snake and ladder details
            updateDetails();
        }

        function updateDetails() {
            snakeList.innerHTML = '';
            for (const [start, end] of Object.entries(snakes)) {
                const li = document.createElement('li');
                li.textContent = `From ${start} to ${end}`;
                snakeList.appendChild(li);
            }

            ladderList.innerHTML = '';
            for (const [start, end] of Object.entries(ladders)) {
                const li = document.createElement('li');
                li.textContent = `From ${start} to ${end}`;
                ladderList.appendChild(li);
            }
        }

        function updatePlayerPosition() {
            const squares = document.querySelectorAll('.square');
            squares.forEach(square => square.innerHTML = '');

            playerPositions.forEach((pos, idx) => {
                if (pos > 0 && pos <= 30) {
                    const playerSquare = squares[30 - pos];
                    const playerDiv = document.createElement('div');
                    playerDiv.classList.add('player', `p${idx + 1}`);
                    playerDiv.textContent = playerNames[idx];
                    playerSquare.appendChild(playerDiv);
                }
            });
        }

        function updatePlayerPositionsList() {
            playerPositionsList.innerHTML = '';
            playerPositions.forEach((pos, idx) => {
                const li = document.createElement('li');
                li.textContent = `${playerNames[idx]}: ${pos}`;
                playerPositionsList.appendChild(li);
            });
        }

        function rollDice() {
            diceRoll = Math.floor(Math.random() * 6) + 1;
            message.textContent = `${playerNames[currentPlayer]} rolled a ${diceRoll}`;
            askQuestion();
        }

        function startTimer() {
            let timeLeft = 20;
            timerDisplay.textContent = timeLeft;

            timer = setInterval(() => {
                timeLeft--;
                timerDisplay.textContent = timeLeft;

                if (timeLeft <= 0) {

                    clearInterval(timer);
                    checkAnswer(null); // Time out - treat as no answer selected
                }
            }, 1000);
        }

        function askQuestion() {
            rollButton.style.display = 'none'; // Hide the Roll Dice button
            const question = questions[currentQuestionIndex];
            questionText.textContent = question.question;
            choices.innerHTML = '';

            question.options.forEach(option => {
                const li = document.createElement('div');
                li.innerHTML = `<label><input type="radio" name="answer" value="${option}"> ${option}</label>`;
                choices.appendChild(li);
            });

            questionBox.style.display = 'flex';
            startTimer();

            submitAnswer.onclick = () => {
                clearInterval(timer); // Clear timer when answer is submitted
                checkAnswer(question.answer);
            };
        }

        function checkAnswer(correctAnswer) {
            const selectedAnswer = document.querySelector('input[name="answer"]:checked');
            let answeredCorrectly = false;

            if (selectedAnswer) {
                const answerValue = selectedAnswer.value;
                if (answerValue === correctAnswer) {
                    message.textContent += ` - Correct! ${playerNames[currentPlayer]} can move forward.`;
                    answeredCorrectly = true;
                    playerPositions[currentPlayer] += diceRoll;

                    if (playerPositions[currentPlayer] > 30) {
                        playerPositions[currentPlayer] = 30;
                    }

                    // Check for snakes or ladders
                    if (snakes[playerPositions[currentPlayer]]) {
                        playerPositions[currentPlayer] = snakes[playerPositions[currentPlayer]];
                        message.textContent += ` - Oops! ${playerNames[currentPlayer]} slid down a snake to ${playerPositions[currentPlayer]}`;
                    } else if (ladders[playerPositions[currentPlayer]]) {
                        playerPositions[currentPlayer] = ladders[playerPositions[currentPlayer]];
                        message.textContent += ` - ${playerNames[currentPlayer]} climbed a ladder to ${playerPositions[currentPlayer]}`;
                    }
                } else {
                    message.textContent += ` - Incorrect! ${playerNames[currentPlayer]} stays put.`;
                }
            } else {
                message.textContent += ` - No answer selected. ${playerNames[currentPlayer]} stays put.`;
            }

            questionBox.style.display = 'none';
            rollButton.style.display = 'block'; // Show the Roll Dice button again
            updatePlayerPosition();
            updatePlayerPositionsList();

            // Move to the next player
            currentPlayer = (currentPlayer + 1) % playerNames.length;

            // If answered incorrectly, don't change the question
            if (answeredCorrectly) {
                currentQuestionIndex = (currentQuestionIndex + 1) % questions.length; // Move to next question if answered correctly
            }
        }

        createBoard();
        updatePlayerPositionsList();
        rollButton.onclick = rollDice;
    </script>
</body>
</html>
